<script setup>
import myRow from "@/components/common/myRow.vue";
import myLabel from "@/components/common/myLabel.vue";
import { ref } from "vue";
import { message } from "ant-design-vue";
const props = defineProps({
  node: {
    type: Number || String,
    default: 0,
  },
});

const nodeOptions = ref({
  // 配置节点
  widthConstraint: 50, // 节点大小
  color: {
    // 配置节点的颜色
    border: "#037ef3", // 边框颜色
    background: "#037ef3", // 背景颜色
  },
  shape: "circle", // 配置形状,
  font: {
    color: "#fff", // 字体颜色
    size: 20, // 大小
    align: "center", // 文字对齐方式
  },
});

const emits = defineEmits(["saveNodeOptions"]);


const handleSaveNodeOptions = () => {
  // console.log(nodeOptions.value);
  message.success("保存成功!");
  emits("saveNodeOptions", nodeOptions.value);
}
</script>

<template>
  <!-- 节点编辑功能 -->
  <div class="edit-form">
    <h2 style="margin-bottom: 20px">o(*￣▽￣*)ブ当前正在编辑节点 {{ props.node }}</h2>
    <my-row>
      <my-label label="边框颜色">
        <el-color-picker v-model="nodeOptions.color.border"></el-color-picker>
      </my-label>
      <my-label label="背景颜色">
        <el-color-picker
          v-model="nodeOptions.color.background"
        ></el-color-picker>
      </my-label>
      <my-label label="节点大小">
        <section style="width: 200px">
          <a-slider v-model:value="nodeOptions.widthConstraint"></a-slider>
        </section>
      </my-label>
      <my-label label="字体大小">
        <section style="width: 200px">
          <a-slider v-model:value="nodeOptions.font.size"></a-slider>
        </section>
      </my-label>
      <my-label label="字体颜色">
        <el-color-picker v-model="nodeOptions.font.color"></el-color-picker>
      </my-label>
    </my-row>
    <a-button @click="handleSaveNodeOptions">保存</a-button>
  </div>
</template>

<styles lang="scss" scoped></styles>
